<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表情包</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="/plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="/plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
  <style>

    .mainPhoto {
                width: 200px;
                height: 200px;
                margin: 10px;
                background: rgba(0, 0, 0, .1);
                border-radius: 5px;
                position: relative;
                box-shadow: 0px 0px 8px #000;
                float: left;
                overflow: hidden;
                transition: All 0.3s ease-in-out;
                z-index: 1;
            }

            .mainPhoto img {
                border-radius: 5px;
            }

            .mainPhoto:hover {
                transform: scale(1.2);
            }

            .mainPhoto:hover .mainPhotoShadow {
                bottom: -40px;
            }

            .childPhotoList {
                /*float:left;*/
                /*margin-top: -10px;*/
                /*margin-left: 10px;*/
            }

            .childPhoto {
                width: 90px;
                height: 90px;
                margin: 10px;
                position: relative;
                background: rgba(0, 0, 0, .1);
                border-radius: 5px;
                box-shadow: 0px 0px 4px #666;
                float: left;
                overflow: hidden;
                transition: All 0.3s ease-in-out;
            }

            .childPhoto img {
                border-radius: 5px;
            }

            .photoShadowSet {
                width: 90px;
                height: 40px;
                top: 0;
                left: 100px;
                position: absolute;
                border-radius: 5px;
                background: rgba(0, 0, 0, .6);
                font-family: "寰蒋闆呴粦";
                line-height: 40px;
                text-align: center;
                transition: left .2s;
                cursor: pointer;
            }

            .photoShadowSet span {
                color: white;
            }

            .photoShadowDel {
                width: 200px;
                height: 40px;
                top: 160px;
                left: 200px;
                position: absolute;
                border-radius: 5px;
                background: rgba(0, 0, 0, .6);
                font-family: "寰蒋闆呴粦";
                line-height: 40px;
                text-align: center;
                transition: left .2s;
                cursor: pointer;
            }

            .photoShadowDel span {
                color: white;
            }

            .childPhoto:hover {
                transform: scale(1.2);
            }

            .childPhoto:hover .photoShadowSet {
                left: 0;
            }

            .mainPhoto:hover .photoShadowDel {
                left: 0;
            }

            .fileinput-button {
                position: relative;
                overflow: hidden;
            }

            .fileinput-button input {
                position: absolute;
                top: 0;
                right: 0;
                margin: 0;
                opacity: 0;
                -ms-filter: 'alpha(opacity=0)';
                /* font-size: 200px; */
                /* direction: ltr; */
                cursor: pointer;
            }

            .mainPhotoShadow {
                height: 40px;
                font-size: 24px;
                color: white;
                line-height: 40px;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 0;
                wid: 100%;
                background: rgba(0, 0, 0, .6);
                border-radius: 0 0 5px 5px;
                transition: All 0.3s ease-in-out;
            }

          .input{
                width:60%
            }
    </style>


<body class="skin-blue sidebar-mini wysihtml5-supported">
<jsp:include page="header.jsp"/>
<jsp:include page="menu.jsp"/>

<div class="content-wrapper">
    <c:if test="${cusEmotionPacket != null}">
        <section class="content-header">
            <h1>
                修改表情包
            </h1>

            <ol class="breadcrumb">
                <li><a href="${firstMenuUrl}"><i class="fa fa-dashboard"></i>${firstMenuName}</a></li>
                <li><a href="${secMenuUrl}"><i class="fa fa-dashboard"></i>${secMenuName}</a></li>
                <li class="active">修改表情包</li>
            </ol>
        </section>
    </c:if>

    <c:if test="${cusEmotionPacket == null}">
        <section class="content-header">
            <h1>
                添加表情包
            </h1>

            <ol class="breadcrumb">
                <li><a href="${firstMenuUrl}"><i class="fa fa-dashboard"></i>${firstMenuName}</a></li>
                <li><a href="${secMenuUrl}"><i class="fa fa-dashboard"></i>${secMenuName}</a></li>
                <li class="active">添加表情包</li>
            </ol>
        </section>

    </c:if>
    <section class="content">

        <div class="box box-info">
            <div class="box-header with-border">
            </div>
                <c:if test="${cusEmotionPacket != null}">
                <form class="form-horizontal" action="/cusEmotionPacketEdit" method="post" onsubmit="javascript:return check();">
                    <input type="hidden" name="id" value="${cusEmotionPacket.id}"/>
                </c:if>
                <c:if test="${cusEmotionPacket == null}">
                <form class="form-horizontal" action="/cusEmotionPacketAdd" method="post" onsubmit="javascript:return check();">
                </c:if>

                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称/备注</label>
                            <div class="col-sm-10">
                                <input type="text" name="name" id="name" placeholder="名称" class="form-control" value="${cusEmotionPacket.name}" style="width:75%">
                            </div>
                         </div>

                         <div class="form-group">
                             <label class="col-sm-2 control-label">表情包简介</label>

                             <div class="col-sm-10">
                                 <textarea rows="3" cols="60" onkeyup="javascript:checkWord(this,150);" onmousedown="javascript:checkWord(this,150);" maxsize="150"
                                                                 data-spanId="wordCheck3" style="overflow-y: scroll" name="detail">${cusEmotionPacket.detail}</textarea>
                                                          <div>
                                                             还可以输入<span style="font-family: Georgia; font-size: 26px;" class="showRem" id="wordCheck3">150</span>个字符
                                                         </div>
                             </div>
                         </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">显示顺序</label>
                            <div class="col-sm-10">
                                <input type="text" name="displayOrder" id="displayOrder"  class="form-control" value="${cusEmotionPacket.displayOrder}" style="width:75%">
                            </div>
                         </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">附带值</label>
                            <div class="col-sm-10">
                                <input type="text" name="code" id="code"  class="form-control" value="${cusEmotionPacket.code}" style="width:75%">
                            </div>
                         </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <input type="text" name="directory" id="directory"  class="form-control" value="${cusEmotionPacket.directory}" style="width:75%">
                            </div>
                         </div>


                         <div class="form-group">
                             <label class="col-sm-2 control-label">当前可用</label>
                             <div class="col-sm-10">
                                     <select id="available" name="available"
                                             class="form-control select2 select2-hidden-accessible" style="width: 75%;"
                                             tabindex="-1" aria-hidden="true">
                                             <option value="0" <c:if test='${cusEmotionPacket.available ==0}'>selected='selected'</c:if>>不可用</option>
                                             <option value="1" <c:if test='${cusEmotionPacket.available ==1 || cusEmotionPacket.available == null}'>selected='selected'</c:if>>可用</option>
                                     </select>
                               </div>
                          </div>



                         <div class="form-group">
                                 <label class="col-sm-2 control-label">封面图</label>
                                 <div id="container" style="position: relative;margin-top: 10px;">
                                     <a class="btn btn-default btn-lg " id="pickfiles"
                                        style="position: relative; z-index: 1;left: 14px;" href="javascript:;">
                                         <i class="glyphicon glyphicon-plus"></i>
                                         <span>选择图片</span>
                                     </a>

                                 </div>
                             </div>
                             <br style="clear: both;"/>
                             <div class="form-group">
                                 <label class="col-sm-2 control-label">&nbsp;</label>
                                 <div id="imageView" class="form-group form-group-sm col-sm-10">
                                   <c:if test="${cusEmotionPacket.cover != null}">
                                     <div class="mainPhoto bizLicenseImage" data-isstar="0">
                                         <img width="200" height="200" id="bizLicenseImage" src="${cusEmotionPacket.cover}"/>
                                         <div class="photoShadowDel" onclick="deleteImage(this)"><span>删除图片</span>
                                     </div>
                                       <input type="hidden" class="form-control" id="cover" name="cover" value="${cusEmotionPacket.cover}">
                                    </c:if>

                                 </div>
                             </div>

                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-info pull-right">提交</button>
                    </div>

                </form>
        </div>
    </section>
</div>

</div>


   <script type="text/javascript">

        function Q(s) { return document.getElementById(s); }

        function checkWord(c,maxstrlen) {
            len = maxstrlen;
            var str = c.value;
            myLen = getStrleng(str,maxstrlen);
            var wck = Q($(c).attr('data-spanId'));

            if (myLen > len * 2) {
                c.value = str.substring(0, i + 1);
            }
            else {
                wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
            }
        }

        function getStrleng(str,maxstrlen) {
            myLen = 0;
            i = 0;
            for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
                    myLen++;
                else
                    myLen += 2;
            }
            return myLen;
        }

    function deleteImage(that) {
        $(that).parent().remove();
    }

    </script>

<script type="text/javascript" src="/ks3/plupload.full.min.js"></script>
<script type="text/javascript" src="/ks3/ks3jssdk.min.js"></script>
<script type="text/javascript">
    var tempPolicy,tempSignature,tempKey,tempKSSAccessKeyId, tempAcl;
    var ks3Options = {
        bucket_name: "${BUCKET_NAME}",
        uploadDomain: "http://kssws.ks-cdn.com/${BUCKET_NAME}",
        autoStart: true,

        onFileUploadedCallBack: function(uploader, obj){
          var sourceLink = 'http://${BUCKET_NAME}.kssws.ks-cdn.com/'+ tempKey;
          $("#imageView").html('<div class="mainPhoto bizLicenseImage" data-isstar="0"><img width="200" height="200" id="bizLicenseImage1" src="' + sourceLink + '"/><div class="photoShadowDel" onclick="deleteImage(this)"><span>删除图片</span></div><input type="hidden" name="cover" value="' + sourceLink + '"></div>');

        },
         onBeforeUploadCallBack: function(uploader, obj){
                          $.ajax({
                                     url: "/ks3DetailOfPNG",
                                     type:"POST",
                                     async: false,
                                     dataType: "json",
                                     success: function (data) {
                                     tempKSSAccessKeyId = data.accessKey;
                                     tempPolicy = data.policy;
                                     tempSignature = data.signature;
                                     tempKey = data.fileName;
                                     tempAcl = data.acl;
                                     tempUpload.uploader.setOption("multipart_params", {
                                                     "KSSAccessKeyId": tempKSSAccessKeyId,
                                                     "policy": tempPolicy,
                                                     "signature" : tempSignature,
                                                     "acl":tempAcl,
                                                     "key": tempKey,
                                                 })

                                     },
                                     error: function (msg) {
                                          alert(msg.responseText);
                                          window.location.reload();
                                     }
                                 });

        }
    };

    var pluploadOptions = {
              runtimes : 'html5,flash,silverlight,html4',
           browse_button : 'pickfiles', // you can pass in id...     
           filters : {
               max_file_size : '10mb',
               mime_types: [
                   {title : "Image files", extensions : "jpg,png"}
               ]
           },
        
           // Flash settings
           flash_swf_url : '/plupload/js/Moxie.swf',
        
           // Silverlight settings
           silverlight_xap_url : '/plupload/js/Moxie.xap',
            
    };

  var tempUpload = new ks3FileUploader(ks3Options, pluploadOptions);


</script>




<!-- jQuery 2.1.4 -->
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/js/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.5 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- Sparkline -->
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="/js/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/dist/js/app.min.js"></script>
</body>
</html>